{% extends "admin/base_site.html" %}
{% comment %}
This template overrides one of the standard admin ones.
The changes are:
   - take care of url prefix
   - give the login button a jquery-ui look and feel
   - check for old versions of Internet Explorer
{% endcomment %}
{% load i18n %}

{% block extrastyle %}{{block.super}}
<style>
  #headerbar {
    background-color: transparent;
  }
  #login-form, #content {
    margin-top: 0px;
  }
  body.login {
    background: white;
  }
  .login #container {
    border: none;
  }

</style>
{% endblock %}
{% block extrahead %}
<script src="{{STATIC_URL}}js/jquery-3.4.1.min.js"></script>
<script>
$(function() {
  if (!!window.MSInputMethodContext && !!document.documentMode) {
    // You are using internet explorer.
    // See http://stackoverflow.com/questions/21825157/internet-explorer-11-detection
  	$("#row1").html(
  	  '<br>Internet Explorer is no longer supported.<br>'
      + 'Microsoft doesn\'t keep this browser up to date with the modern '
      + 'web technologies used by frePPLe.<br><br>'
      + 'Please Google <strong>Chrome</strong>, Mozilla <strong>Firefox</strong>, '
      + 'Microsoft <strong>Edge</strong>, Apple <strong>Safari</strong> '
      + 'or another modern browser.'
      );
  	$('#row2').hide();
  }
  else
    $('#id_username').focus();

  $('#id_email_or_username').addClass("form-control");
  $('#id_new_password1').addClass("form-control");
  $('#id_new_password2').addClass("form-control");
});
</script>
{% endblock %}

{% block bodyclass %}login{% endblock %}

{% block nav-global %}{% endblock %}

{% block content_title %}{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}

<div class="row" style="padding-bottom: 30px; padding-top: 50px;">
	<div class="col-xs-4 center-block" style="min-width: 200px; max-width:300px; float:none;">
	 {% block branding %}{{ block.super }}{% endblock %}
	</div>
</div>

<!-- Form rendering code for template -->
<form action="" method="post">

    {% csrf_token %}

  <div class="form-group text-center">

  </div>
</form>

<div class="row" id="content-main" >
  <div id="row1" class="col-xs-4 center-block" style="min-width: 200px; max-width:300px; float:none; text-align:left;">
		<form role="form" action="" method="post">
      {% csrf_token %}

		  <div class="form-group">
		    {{ form.as_p }}
		  </div>
		  <div class="form-group text-center">
		    <input type="submit" class="btn btn-lg btn-primary" value="{% trans 'Submit' %}"/>
		  </div>

		</form>
	</div>
</div>

{% endblock %}
